<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>名企面试题</span>
                <el-button style="float: right; padding: 3px 0" type="text">更多<sapn class="el-icon-arrow-right"></sapn></el-button>
            </div>
            <div  class="text item">
               <div style="height: 180px; width: 100%; ">
                   <card brand="字节跳动" urls="http://www.handsomehuang.cn:8081/img2/qiyelogo/zijietiaodong.png" hot-num="232"></card>
                   <card brand="滴滴打车" urls="http://www.handsomehuang.cn:8081/img2/qiyelogo/didi.jpg" hot-num="102"></card>
                   <card brand="华为" urls="http://www.handsomehuang.cn:8081/img2/qiyelogo/huawei.png" hot-num="854"></card>
                   <card brand="哔哩哔哩" urls="http://www.handsomehuang.cn:8081/img2/qiyelogo/blibli.png" hot-num="1242"></card>

               </div>
            </div>

            <div class="inner-bou">
                <div @click="taolun(item.id, item.imgUrl, item.name, item.des, item.views)"  class="boxtaolun" v-for="item in discuss">
                    <div class="head2" style="position: relative; top: 20px">
                        <img :src="item.imgUrl" height="22" width="22" style="border-radius: 50%"/>
                        <span class="taolunName">{{item.name}}</span>
                    </div>
                    <div class="dec" style="margin-top: 30px">
                      {{item.des}}
                    </div>
                    <div>
                        <span class="taolun"><i class="el-icon-bell"></i>讨论</span>
                        <span class="tuijian">我要上推荐</span>
                    </div>
                </div>

            </div>
        </el-card>
    </div>
</template>

<script>
    import Card from "./card"
    import {request} from "../../network/request";
    export default {
        name: "inner",
        data(){
            return{
                discuss:[]
            }
        },
        components: {Card},
        comments: {
            'Card' : Card
        },
        methods:{
            taolun(id, imgUrl, name, des, views){
               // console.log(id);
                this.$router.push({
                    path:"/taolun",
                    query:{
                        id:id,
                        imgUrl:imgUrl,
                        name:name,
                        des:des,
                        views:views
                    }
                });
                // this.$router.push("/taolun");
            }
        },
        created() {
            request({
                url:"/getAllDiscuss",
                method: "post",
                params:{

                }
            }).then(res=>{
               //console.log(res.data);
                let g = [];
                let cnt = 0;
                let rcnt = 0;
                if(res.data.length > 7){
                    for(let i = 0; i < res.data.length; i++){

                        if(Math.random() > 0.5){
                            g[cnt++] = res.data[i];
                        }
                        else{
                            g[res.data.length - 1 - rcnt++] = res.data[i];
                        }
                    }
                  // console.log(g);
                    for(let i = 0; i < 7; i++){
                        this.discuss.push(g[i]);
                    }
                }
                else{
                    this.discuss = res.data;
                }



            }).catch(err=>{
                //alert(err);
                console.log(err);
            });

        }
    }
</script>


<style scoped>
    .inner-bou{
        height: 1000px;
    }

    .boxtaolun{
        margin-top: 10px;
    }
    .boxtaolun:hover{
        background-color: #f5f9f5;
    }
    .taolunName{
        margin-left: 10px;
        position: absolute;
    }
    .taolunName:hover{
        color: #62b038;
    }
    .taolun{
        font-size: 12px;
        color: rgba(45,181,93);
        background: rgba(45,181,93,0.15);
        height: 24px;
        line-height: 20px;
        padding: 2px 8px;
        border-radius: 12px;
        margin-right: 10px;
    }
    .tuijian{
        font-size: 12px;
        color: rgba(60,60,67,0.6);
        background: rgba(0,0,0,0.05);
        height: 30px;
        line-height: 20px;
        padding: 2px 8px;
        border-radius: 12px;
        margin-right: 10px;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 791px;

    }
    .head2{
        font-size: 16px;
        line-height: 22px;
        font-weight: 500;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: pre;
        margin-right: 10px;
        flex: 1 1 0%;
    }
    .inner-bou div{
        cursor: pointer;

    }
    .inner-bou .box{
        border-top: 1px solid rgba(240,240,240, 1);
    }
    .inner-bou .dec{
        font-size: 14px;
        line-height: 20px;
        color: rgba(60,60,67,0.6);
        -webkit-line-clamp: 2;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        margin: 16px 0px 18px;
    }

</style>